<template>
	<view>
		<view class="order_box" v-if="billList">
			<view class="order_item_box" v-for="(item, index) in billList" :key="index" @click="jump(item)">
				<view>
					<view class="orderTime">{{ item.time }}</view>
				</view>
				<view class="line"></view>
				<view class="bill_box">
					<view class="billPicture"><image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/website/img/webxzy/twoxze_5.png" mode="" /></view>
					<view class="billingInfo">
						<view class="billingInfo_upper">
							<view class="billingInfo_upper_text">{{ item.name }}</view>
							<view class="billingInfo_upper_amount">
								{{ item.status == 1 ? '待支付金额' : '已支付金额' }}：
								<text>¥ {{ item.fee }}</text>
							</view>
							<view class="orderNumber">{{ item.out_trade_no }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<u-empty marginTop="200" mode="order" icon="https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_5_25_fxt1685416948198.png"></u-empty>
		</view>
	</view>
</template>

<script>
import { apiMixUrlApi } from '@/api/assemb.js';
import {
		grayControl
	} from '@/utils/grayControl.js'
export default {
	data() {
		return {
			billList: [],
			platform: ''
		};
	},
	onShow() {
		this.loadData();
		grayControl()
	},
	onLoad() {
		// this.loadData();
	},
	methods: {
		jump(item) {
			if (uni.getStorageSync('OS') !== 'ios') {
					uni.navigateTo({
						url: '/pages/paymentCenter/paymentCenter'
					});
				}else{
					uni.showToast({
						icon:'none',
						title:'暂未开放'
					})
					}
		},

		loadData() {
			var self = this;
			apiMixUrlApi({}, 1095, 'GetOrderStatus').then((json) => {
				if(json.descinfo == 'success'){
					self.billList = json.orders
					console.log(self.billList)
				}
			// console.log(json)
			// 	console.log(json.orders, '错了错了错了');
				
				// if (!json.orders) {
				// 	self.billList = [];
				// 	return;
				// }
				// let orderArray = [];
				// json.orders.forEach((item, index, array) => {
				// 	if (item.appid == self.$store.state.appId) {
				// 		if (item.product_name.includes('vipmonth')) {
				// 			item.name = '1个月vip';
				// 			item.isvip = 1;
				// 		}
				// 		if (item.product_name.includes('vipyear')) {
				// 			item.name = '12个月vip';
				// 			item.isvip = 1;
				// 		}
				// 		if (item.product_name.includes('viplife')) {
				// 			item.name = '终身会员';
				// 			item.isvip = 1;
				// 		}
				// 		if (item.product_name.includes('upsvip')) {
				// 			item.name = '升级svip';
				// 			item.isvip = 1;
				// 		}
				// 		if (item.product_name.includes('svipmonth')) {
				// 			item.name = '1个月svip';
				// 			item.isvip = 1;
				// 		}
				// 		if (item.product_name.includes('svipquarter')) {
				// 			item.name = '3个月svip';
				// 			item.isvip = 1;
				// 		}
				// 		if (item.product_name.includes('svipyear')) {
				// 			item.name = '12个月svip';
				// 			item.isvip = 1;
				// 		}
				// 		if (item.product_name.includes('10wtext')) {
				// 			item.name = '10w字符';
				// 			item.isvip = 3;
				// 		}
				// 		if (item.product_name.includes('20wtext')) {
				// 			item.name = '20w字符';
				// 			item.isvip = 3;
				// 		}
				// 		if (item.product_name.includes('50wtext')) {
				// 			item.name = '50w字符';
				// 			item.isvip = 3;
				// 		}
				// 		if (item.product_name.includes('100wtext')) {
				// 			item.name = '100w字符';
				// 			item.isvip = 3;
				// 		}
				// 		if (item.product_name.includes('200wtext')) {
				// 			item.name = '200w字符';
				// 			item.isvip = 3;
				// 		}
				// 		if (item.product_name.includes('500wtext')) {
				// 			item.name = '500w字符';
				// 			item.isvip = 3;
				// 		}
				// 		orderArray.push(item);
				// 	}
				// });
				// self.billList = orderArray.reverse();
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f7f7f7;
}
.order_box {
	width: 100%;
	height: 88vh;
}
.order_item_box {
	margin: auto;
	margin-top: 20rpx;
	width: 700rpx;
	background: #ffffff;
	border-radius: 12rpx;
	padding: 28rpx 27rpx 35rpx 27rpx;
}
.afterSales_box {
	width: 100%;
	height: 88vh;
}
.afterSales_item_box {
	margin: auto;
	margin-top: 20rpx;
	width: 700rpx;
	height: 320rpx;
	background: #ffffff;
	border-radius: 12rpx;
}

.orderTime {
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 26rpx;
}
.line {
	width: 100%;
	height: 1rpx;
	background: #cccccc;
	margin-top: 21rpx;
}
.bill_box {
	width: 100%;
	margin-top: 28rpx;
	display: flex;
}
.billPicture {
	width: 180rpx;
	height: 180rpx;
	border-radius: 18rpx;
	overflow: hidden;
}
.billPicture image {
	width: 100%;
	height: 100%;
}
.billingInfo {
}
.billingInfo_upper {
	width: 100%;
	margin-top: 28rpx;
	margin-left: 36rpx;
}
.billingInfo_upper_text {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #333333;
}
.billingInfo_upper_amount {
	font-size: 29rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	margin-top: 10rpx;
}
.billingInfo_upper_amount text {
	font-size: 29rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ff3333;
}
.button1 {
	width: 152rpx;
	height: 50rpx;
	border: 1rpx solid #333333;
	border-radius: 25rpx;
	margin-left: 21rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 50rpx;
	text-align: center;
}
.button2 {
	width: 152rpx;
	height: 50rpx;
	border: 1rpx solid #333333;
	border-radius: 25rpx;
	margin-left: 176rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 50rpx;
	text-align: center;
}
.billingInfo_lower {
	display: flex;
	margin-left: 135rpx;
	margin-top: 34rpx;
}
.activation {
	border: 1px solid #ff3333;
	color: #ff5961;
}
.orderNumber {
	width: 100%;
	font-size: 25rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	margin-top: 10rpx;
	margin-left: 0rpx;
}
</style>

